<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    button {
        margin: 50px auto;
        display: block;
        width: 200px;
        height: 100px;
        background-color: #85e60f;
    }

    p {
        width: 400px;
        height: 200px;
        margin: 50px auto;
        font-size: 70px;
        text-align: center;
        line-height: 200px;
    }
</style>
<body>
    <div>
        <button id="button">开始</button>
        <p id="p">吃什么呢</p>
    </div>
</body>
<script>
    var button = document.getElementById('button')
    var p = document.getElementById('p')
    var res
    button.onclick = function () {
        if (button.innerHTML === '开始') {
            button.innerHTML = '停止';
            res = setInterval(function fn() {
                var finefood = ['螺蛳粉', '拉面', '螺蛳粉', '蛋炒饭', '冒菜', '凉皮', '凉面', '粥', '手抓饼', '馄饨', '煲仔饭', '猪脚饭']
                p.innerHTML = finefood[Math.floor(Math.random() * finefood.length)]
                //颜色
                var n1 = parseInt(Math.random() * 255 + 1);
                var n2 = parseInt(Math.random() * 255 + 1);
                var n3 = parseInt(Math.random() * 255 + 1);
               document.body.style.background = "rgb(" + n1 + "," + n2 + "," + n3 + ")";
            }, 0)
        }
        else {
            clearInterval(res)
            button.innerHTML = '开始'
        }
    }
</script>

</html>